<!--
 * @description  : 报表-持证零售户统计
 * @descriptionDetail : 报表-持证零售户统计
 * @author       : zx
 * @create       : 2024-10-08 00:00:00
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" title="持证零售户统计" :custom-back="goBack" style="z-index: 99999" />
    <!-- #endif -->
    <view class="static">
      <span class="text">持证零售户</span>
      <span><span class="num u-p-r-10">{{totalObj.commonDetailList.length>1?totalObj.commonDetailList[0].total:'0'}}</span><span class="unit">户</span></span>
    </view>
    <scroll-view :scroll-y="false" :scroll-x="true" :style="{ height: scrollRealHeight, marginTop: '5px', paddingBottom:'10px'}">
      
      <view v-if="newList.length==0" class="no-data">
        ~ 暂无数据 ~
      </view>
      <u-table v-else font-size="30" style="border-left: none;" ref="tbRef">
        <!-- <u-tr class="u-tr border-left">
        <u-th width="40%">单位</u-th>
        <u-th width="30%">数量</u-th>
        <u-th width="30%">同比</u-th>
      </u-tr> -->

        <u-tr class="u-tr border-left" v-for="(item, idx) in newList" :key="idx">
          <u-td width="40%">{{item.maxTypeName}}</u-td>
          <u-td width="30%" class="td-child">
            <u-tr v-for="(cell, i) in item.commonDetailList" :key="i">
              <u-td>{{cell.minTypeName}}</u-td>
            </u-tr>
          </u-td>
          <u-td width="30%" class="td-child">
            <u-tr v-for="(cell, i) in item.commonDetailList" :key="i">
              <u-td class="tr-view">{{cell.certifiedAccountTotal}}</u-td>
            </u-tr>
          </u-td>
        </u-tr>

      </u-table>
    </scroll-view>
  </view>
</template>
<script>
import reportService from "@/service/report/report.service";
// import mescrollList from "@/components/mescroll_list.vue";

export default {
  // components: { mescrollList },
  data() {
    return {
      param: {},
      scrollRealHeight: "50px",
      newList: [],
      totalObj: {}
    };
  },
  onLoad() {
    this.param = this.getRouteParam();
    this.loadData();
  },
  methods: {
    getListViewHeight() {
      let p =
        this.$u.sys().windowHeight -
        44 -
        uni.upx2px(180) -
        this.$u.sys().statusBarHeight +
        "px";
      return p;
    },
    // 列表数据初始化
    loadData() {
      uni.showLoading({
        title:'加载中...',
      });
      reportService
        .LicenceStatisticsCom({ reportCode: "LIC_RETAIL_LICENSE_STATISTICS" })
        .then(res => {
          if (res.success) {
            let arr = res.data;
            
            // this.newList = this.buildTree(arr);
            arr.forEach(item=>{
              if(item.maxTypeName){
                this.newList.push(item)
              }else{
                this.totalObj=item
              }
            })
            uni.hideLoading();
            if(this.newList.length){
              setTimeout(() => {
              this.scrollRealHeight =
                this.$refs.tbRef.$el.clientHeight + 5 + "px";
                }, 100);
              } else {
            }
            
            uni.hideLoading();
            // this.$u.error(res.msg);
          }
        })
        .catch(err => {
          uni.hideLoading();
          this.$u.error(err.msg);
        });
    },
    // buildTree(array) {
    //   let newArr = [];
    //   array.forEach(item => {
    //     newArr.push({
    //       maxTypeName: item.maxTypeName,
    //       maxType: item.maxType,
    //       List: []
    //     });
    //   });
    //   newArr = Array.from(new Set(newArr.map(JSON.stringify))).map(JSON.parse);
    //   array.forEach(cell => {
    //     newArr.forEach(item => {
    //       if (cell.maxType == item.maxType) {
    //         item.List.push({
    //           certifiedAccountTotal: cell.certifiedAccountTotal,
    //           maxType: cell.maxType,
    //           maxTypeName: cell.maxTypeName,
    //           minType: cell.minType,
    //           minTypeName: cell.minTypeName,
    //           total: cell.total
    //         });
    //       }
    //     });
    //   });
    //   this.totalObj = newArr[0];
    //   newArr = newArr.filter(item => item.maxType !== 0);
    //   return newArr;
    // }
  }
};
</script>
<style lang="scss" scoped>
.static {
  width: 100%;
  height: 160rpx;
  color: #fff;
  display: flex;
  padding: 30rpx 40rpx;
  margin-bottom: 40rpx;
  align-items: center;
  border-radius: 10rpx;
  justify-content: space-between;
  background-color: #327be7;
  .text {
    font-size: 36rpx;
  }
  .num {
    font-size: 50rpx;
    font-weight: 700;
  }
  .unit {
    font-size: 30rpx;
  }
}
.border-left {
  border-left: 1px solid rgb(228, 231, 237);
}
.u-tr {
  line-height: 55rpx;
  .u-th {
    background-color: #f6fbff;
  }
  .u-td:nth-child(1),
  .u-td:nth-child(2) {
    background-color: #f6fbff;
  }
  .u-td:first-child {
    height: auto;
  }
}
.tr-view {
  font-weight: 700;
  color: #2770e7 !important;
}
.td-child {
  padding: 0 !important;
  color: rgb(96, 98, 102) !important;
}
.no-data{
	text-align: center;margin: 20px;
}
</style>